import * as React from 'react';
import { Button, Layout, Flex} from 'antd';
import TableTree from './tableTree';
import { LineHeightOutlined } from '@ant-design/icons';
import MyHeader from './myHeader';
import EditableTable from './myForm';


const headerStyle: React.CSSProperties = {
    backgroundColor:"whitesmoke",

    
  };
  
  const contentStyle: React.CSSProperties = {
   backgroundColor:"white"
   
    
  };
  
  const siderStyle: React.CSSProperties = {
    backgroundColor:"whitesmoke"
    
  };

  
  const layoutStyle = {
    minHeight: "689px",
    color:"white"
  };

function MyLayout(){
    const [selectedNode, setSelectedNode] = React.useState(null);
    const [appId, setAppId] = React.useState()
    const {Sider, Header,Content} = Layout;
    return (
        <Flex wrap>
            <Layout style={layoutStyle}>
                <Sider  style={siderStyle}>
                    <TableTree onNodeSelect={setSelectedNode}  />
                </Sider>
                <Layout>
                    {/* <Header style={headerStyle}>
                        <MyHeader/>
                    </Header> */}
                    <Content style={contentStyle}>
                        <EditableTable nodeInfo={selectedNode} />
                    </Content>
                </Layout>
            </Layout>
        </Flex>
    )
}

export default MyLayout;